<template>
  <div class="index">
    <div class="footer"></div>
    <p>就业地区分布</p>
    <echart :option="option"></echart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          top: "90%",
          textStyle: {
            color: "rgba(255, 255, 255, 0.5)",
            fontSize: 14 //字体大小
          },
          itemWidth: 14,
          itemHeight: 14,
          data: ["云南", "北京", "山东", "河北", "江苏", "浙江", "深圳", "广东"]
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 2
            },
            label: {
              fontSize: 14
            },
            // 文字调整
            label: {
              fontSize: 14
            },
            // 引导线调整
            labelLine: {
              // 连接扇形图线长
              length: 6,
              // 连接文字线长
              length2: 8
            },
            data: [
              { value: 30, name: "云南" },
              { value: 28, name: "北京" },
              { value: 26, name: "山东" },
              { value: 24, name: "河北" },
              { value: 22, name: "江苏" },
              { value: 20, name: "浙江" },
              { value: 18, name: "深圳" },
              { value: 16, name: "广东" }
            ].map((item, index) => {
              item.label = {
                color: [
                  "#5470c6",
                  "#91cc75",
                  "#fac858",
                  "#ee6666",
                  "#73c0de",
                  "#3ba272",
                  "#fc8452",
                  "#9a60b4"
                ][index]
              };
              return item;
            }),
            itemStyle: {
              color: params => {
                var index = params.dataIndex;
                return [
                  "#5470c6",
                  "#91cc75",
                  "#fac858",
                  "#ee6666",
                  "#73c0de",
                  "#3ba272",
                  "#fc8452",
                  "#9a60b4"
                ][index];
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .rightBotEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>